<%- include('../../layouts/base/header', { title: isEdit ? '编辑书籍' : '创建书籍' }) %>

<div class="min-h-screen py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="bg-white rounded-lg  border">
            <div class="px-6 py-4 border-b border-gray-200">
                <h1 class="text-2xl font-bold text-gray-900">
                    <% if (isEdit) { %>
                        编辑书籍
                    <% } else { %>
                        创建新书籍
                    <% } %>
                </h1>
                <p class="mt-1 text-sm text-gray-500">
                    <% if (isEdit) { %>
                        修改书籍的基本信息
                    <% } else { %>
                        填写书籍的基本信息来创建新书籍
                    <% } %>
                </p>
            </div>

            <form method="POST" action="<%= isEdit ? `/book/${ book.username }/${ book.slug }/edit` : '/book/create' %>" enctype="multipart/form-data" class="<%= isEdit ? 'p-6 pt-0' : 'p-6' %> space-y-6">
                <%- include('../../components/alert', { type: 'error', message: error }) %>
                <%- include('../../components/alert', { type: 'success', message: success }) %>
                <% if (isEdit) { %>
                    <input type="hidden" class="hidden" name="_method" value="PUT">
                <% } %>

                <!-- 封面图片 -->
                <div>
                    <label for="cover_image" class="block text-sm font-medium text-gray-700 mb-2">
                        封面图片 <span class="text-red-500">*</span>
                    </label>

                    <% if (isEdit && book.cover_image) { %>
                        <div class="mb-4 text-left">
                            <img src="<%= book.cover_image %>"
                                 alt="书籍封面"
                                 class="w-32 h-40 object-cover rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
                        </div>
                    <% } %>

                    <div class="flex items-center space-x-4">
                        <input type="file"
                               id="cover_image"
                               name="cover_image"
                               accept="image/*"
                               class="block text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">

                        <% if (isEdit && book.cover_image) { %>
                            <div class="flex items-center space-x-2">
                                <%- include('../../components/input', { type: 'checkbox', name: 'remove_cover', value: 1, id: 'remove_cover', className: '!h-4 !w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded' }) %>
                                <label for="remove_cover" class="text-sm text-red-600 whitespace-nowrap">删除当前封面</label>
                            </div>
                        <% } %>
                    </div>

                    <p class="mt-1 text-xs text-gray-500">
                        支持 JPG、PNG、GIF 格式，建议尺寸 300x400 像素
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 书籍标题 -->
                    <div>
                        <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                            书籍标题 <span class="text-red-500">*</span>
                        </label>
                        <%- include('../../components/input', { type: 'text', name: 'title', id: 'title', value: isEdit ? book.title : '', required: true, placeholder: '请输入书籍标题' }) %>
                    </div>

                    <!-- URL路径 -->
                    <div>
                        <label for="slug" class="block text-sm font-medium text-gray-700 mb-2">
                            URL路径 <span class="text-red-500">*</span>
                        </label>
                        <div class="flex items-center">
                            <%- include('../../components/input', { type: 'text', name: 'slug', prefix: `/book/${ isEdit ? book.username : user.username }/`, id: 'slug', value: isEdit ? book.slug : '', required: true, placeholder: '请输入URL路径' }) %>
                        </div>
                        <p class="mt-1 text-xs text-gray-500">
                            只能包含小写字母、数字和连字符，将用于书籍的访问地址
                        </p>
                    </div>
                </div>

                <!-- 书籍文档前缀 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="chapter_prefix" class="block text-sm font-medium text-gray-700 mb-2">
                            书籍文档前缀
                        </label>
                        <div class="flex items-center">
                            <%- include('../../components/input', { type: 'text', name: 'chapter_prefix', id: 'chapter_prefix', value: isEdit ? book.chapter_prefix : '', placeholder: '请输入书籍文档前缀' }) %>
                        </div>
                        <p class="mt-1 text-xs text-gray-500">
                            书籍文档的前缀，末尾不要添加连接符。例如：chapter 文档将会自动生成路径 chapter_xxxx
                        </p>
                    </div>
                </div>

                <!-- 书籍描述 -->
                <div>
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">
                        书籍描述
                    </label>
                    <%- include('../../components/textarea', { name: 'description', id: 'description', value: isEdit ? book.description : '', placeholder: '请输入书籍描述' }) %>
                </div>

                <!-- 状态设置 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 发布状态 -->
                    <div>
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-2">
                            发布状态
                        </label>
                        <%- include('../../components/select', { id: 'status', name: 'status', value: isEdit ? book.status : 'draft', required: true, options: [ { value: 'draft', label: '草稿' }, { value: 'published', label: '已发布' }, { value: 'archived', label: '已归档' } ] }) %>
                    </div>

                    <!-- 可见性 -->
                    <div>
                        <label for="is_public" class="block text-sm font-medium text-gray-700 mb-2">
                            可见性
                        </label>
                        <%- include('../../components/select', { id: 'is_public', name: 'is_public', value: isEdit ? book.is_public : '0', required: true, options: [ { value: 0, label: '私有' }, { value: 1, label: '公开' } ] }) %>
                        <p class="mt-1 text-xs text-gray-500">
                            公开的书籍可以被其他用户浏览
                        </p>
                    </div>
                </div>

                <!-- 排序 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- 排序字段 -->
                    <div>
                        <label for="order_col" class="block text-sm font-medium text-gray-700 mb-2">
                            排序字段
                        </label>
                        <%- include('../../components/select', { id: 'order_col', name: 'order_col', value: isEdit ? book.order_col : 'created_at', required: true, options: [ { value: 'created_at', label: '创建时间' }, { value: 'updated_at', label: '更新时间' }, { value: 'view_count', label: '浏览量' } ] }) %>
                        <p class="mt-1 text-xs text-gray-500">
                            用于标记书籍的排序字段，只有在书籍目录和阅读时生效。
                        </p>
                    </div>

                    <!-- 排序方式 -->
                    <div>
                        <label for="order_dir" class="block text-sm font-medium text-gray-700 mb-2">
                            排序方式
                        </label>
                        <%- include('../../components/select', { id: 'order_dir', name: 'order_dir', value: isEdit ? book.order_dir : 'asc', required: true, options: [ { value: 'asc', label: '升序' }, { value: 'desc', label: '降序' } ] }) %>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="flex items-center justify-between pt-6 border-t border-gray-200">
                    <div class="flex space-x-3">
                        <%- include('../../components/button', { type: 'submit', icon: 'fas fa-save', text: isEdit ? '保存修改' : '创建书籍' }) %>
                        <%- include('../../components/button', { href: isEdit ? `/book/${authUser.username}/${ book.slug }` : '/book/${authUser.username}', icon: 'fas fa-times', text: '取消', variant: 'outline' }) %>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<%- include('../../layouts/base/footer') %>